"use client";
import { FaMusic } from "react-icons/fa6";
import Link from 'next/link';
import React, { useEffect, useRef, useState } from 'react';
import Login from './Login';

const Navigation = () => {


    const [isLogin, setIsLogin] = useState(false);
    const [animationStep, setAnimationStep] = useState("in");
    const [isReadyToLogin, setIsReadyToLogin] = useState(false);
    const drawEntity = useRef<HTMLInputElement>(null);

    const [audioObject, setAudioObject] = useState({
        isPlaying: true,
        isDisplay: true,
    });

    const handleReadyToLogin = () => {
        setIsReadyToLogin(true);
    };

    const handleClickLink = () => {
        if (drawEntity.current) { // 确保 current 不为 null
            drawEntity.current.checked = false;
        }
    };

    const handleCloseMusic = () => {
        setAudioObject({ ...audioObject, isDisplay: false });
    };

    const handleLogOut = () => {
        setIsLogin(false);
    };

    useEffect(() => {
        // 设置定时器
        if (isLogin === true) {
            const timer = setTimeout(() => {
                setAnimationStep("out");
            }, 2000);

            // 清理定时器
            return () => {
                clearTimeout(timer);
            };
        } else {
            setAnimationStep("in");
        }

    }, [isLogin]);


    return (
        <>
            <div className="relative h-16">

            </div>

            <div className="top-0 z-999 fixed drawer">
                <input ref={drawEntity} id="my-drawer-3" type="checkbox" className="drawer-toggle" />
                <div className="relative flex flex-col drawer-content">
                    {/* Navbar */}
                    <div className="top-0 sticky bg-primary font-douyin navbar">
                        <div className="lg:hidden flex-none">
                            <label htmlFor="my-drawer-3" aria-label="open sidebar" className="text-primary-content hover:cursor-pointer btn-primary btn">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    className="inline-block stroke-current w-6 h-6">
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth="2"
                                        d="M4 6h16M4 12h16M4 18h16"></path>
                                </svg>
                            </label>
                        </div>
                        {/* 这是大标题 */}
                        <div className="top-2 relative flex-1 space-x-2 mx-2 mt-0 font-semibold text-primary-content text-2xl page-title">
                            <span>随</span>
                            <span>便</span>
                            <span>玩</span>
                            <span>玩</span>
                            <span>a</span>
                            <span>y</span>
                        </div>
                        {/* 这是导航栏 */}
                        <div className="hidden lg:block flex-none">
                            <ul className="items-center space-x-3 text-primary-content menu menu-horizontal">
                                {/* Navbar menu content here */}
                                <li><Link href={"/"}>首页</Link></li>
                                <li><Link href={"/technologyStack"}>技术路线</Link></li>
                                <li>
                                    <div className="dropdown dropdown-end">
                                        <div tabIndex={0} role="button" >demo⬇️</div>
                                        <ul tabIndex={0} className="bg-secondary shadow p-2 rounded-box w-30 dropdown-content menu">
                                            <li className="text-center"><Link href={"/demo/2048"}>2048</Link></li>
                                            <li className="text-center"><Link href={"/demo/wechat"}>wechat</Link></li>
                                            <li className="text-center"><Link href={"/demo/MyUiDesign"}>我的Ui组件库</Link></li>

                                        </ul>

                                    </div>
                                </li>
                            </ul>
                        </div>
                        {/* 这是头像和登录控制 */}
                        {isLogin ?
                            <div className="text-primary-content dropdown dropdown-end">
                                <div tabIndex={0} className="w-10 h-10 avatar" role="button">
                                    <div className="rounded-full ring ring-primary ring-offset-2 ring-offset-base-100 w-24">
                                        <img src="https://a.520gexing.com/uploads/allimg/2020041017/hg1v3ie40ps.jpeg" />
                                    </div>
                                </div>
                                <ul tabIndex={0} className="bg-secondary shadow p-2 rounded-box w-30 dropdown-content menu">
                                    <li><button onClick={handleLogOut}>退出登录</button></li>
                                </ul>
                            </div>
                            :
                            <button onClick={handleReadyToLogin} className='btn btn-sm btn-success'>登陆</button>}
                    </div>

                    {/* 这是登录弹窗 */}
                    {isReadyToLogin &&
                        <div className="fixed">
                            <Login setIsLogin={setIsLogin} setIsReadyToLog={setIsReadyToLogin} />
                        </div>
                    }
                    {/* 这是登录成功提示 */}
                    {isLogin &&
                        <div className={`animation-label-topin toast-top toast toast-center animation-label-top${animationStep}`}>
                            <div className="alert alert-success">
                                <span>登录成功！</span>
                            </div>
                        </div>
                    }
                </div >

                {/* 这是侧边栏 */}
                <div className="drawer-side">
                    <label htmlFor="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label>
                    <ul className="bg-base-200 w-80 min-h-full font-douyin menu">
                        {/* Sidebar content here */}
                        <li><Link onClick={handleClickLink} href={"/"}>首页</Link></li>
                        <li><Link onClick={handleClickLink} href={"/technologyStack"}>技术路线</Link></li>
                        <li tabIndex={0} className="">
                            <details open>
                                <summary>demo⬇️</summary>
                                <ul>
                                    <li><Link onClick={handleClickLink} href={"/demo/2048"}>2048</Link></li>
                                    <li><Link onClick={handleClickLink} href={"/demo/wechat"}>wechat</Link></li>
                                    <li><Link onClick={handleClickLink} href={"/demo/MyUiDesign"}>我的Ui组件库</Link></li>
                                </ul>
                            </details>

                        </li>

                    </ul>
                </div>


                {/* 这是音乐控制 */}
                <div className="toast">
                    <div className="">
                        {audioObject.isDisplay ? <audio className="" src="/music/bgmusic.mp3" onPause={handleCloseMusic} controls={audioObject.isDisplay} autoPlay={false} loop={true}></audio> : <button onClick={() => setAudioObject({ ...audioObject, isDisplay: true })} className='shadow-xl btn-primary btn-lg btn btn-circle' ><FaMusic /></button>}


                    </div>
                </div>
            </div >
        </>

    );
};

export default Navigation;
